<template>
	<ex-dialog v-model="visible" draggable :title="form.name ? form.name : (form.id ? form.name : '新增')"
  :width="700" :contentHeight="450">
		<template #default>
			<el-tabs v-model="activeName" style="height: 100%" >
				<el-tab-pane label="基本信息" name="base" style="height: 100%">
					<el-row :gutter="80">
				<el-col :lg="24">
					<el-form :model="form" :rules="form.isGroup==='1'?group_rules:item_rules" ref="dialogForm"
							 label-width="130" label-position="right">
						<el-form-item v-if="!form.id" label="类型" prop="isGroup">
							<ex-radio-group v-model="form.isGroup" dict-code="COLUMN_IS_GROUP" button></ex-radio-group>
						</el-form-item>
						<el-form-item label="所属组" prop="parentLevelCode">
              <ex-cascader v-model="form.parentLevelCode" dict-code="FamsColumn" key-prop="levelCode" :params="{isGroup: '1'}"></ex-cascader>
<!--							<el-cascader v-model="form.parentLevelCode" :options="parentOptions"-->
<!--										 :props="parentProps"-->
<!--										 :show-all-levels="false" placeholder="请选择归属"-->
<!--										 clearable filterable></el-cascader>-->
						</el-form-item>
						<el-form-item label="名称" prop="name">
							<el-input v-model="form.name" clearable placeholder="名称"></el-input>
						</el-form-item>
						<el-form-item label="编码" prop="code">
							<el-input v-model="form.code" clearable placeholder="编码"></el-input>
						</el-form-item>
						<el-form-item label="字段类型" prop="isDynamic">
							<ex-radio-group v-model="form.isDynamic" dict-code="IS_DYNAMIC" button></ex-radio-group>
						</el-form-item>
						<el-form-item v-if="form.isDynamic==='1'" label="存储字段" prop="dynamicCode">
							<el-input v-model="form.dynamicCode" clearable placeholder="存储在数据表中的字段编码(驼峰命名规则)"></el-input>
						</el-form-item>
						<template v-if="form.isGroup==='0'">
							<el-form-item label="控件类型" prop="widgetType">
								<ex-select v-model="form.widgetType" dict-code="WIDGET_TYPE" placeholder="请选择控件类似" @change="widgetTypeChange"></ex-select>
							</el-form-item>
							<template v-if="form.widgetType==='radio'||form.widgetType==='checkbox'||form.widgetType==='select'||form.widgetType==='tree-select'||form.widgetType==='cascade'||form.widgetType==='selector'" label="数据源类型" prop="dataSourceType">
								<el-form-item  label="数据源类型" prop="dataSourceType">
									<ex-select v-model="form.dataSourceType" dict-code="DATA_SOURCE_TYPE" placeholder="请选择数据源类型"  @change="reviewChange"></ex-select>
								</el-form-item>
								<el-form-item v-if="form.dataSourceType==='1'"  label="数据源" prop="dataSourceCode">
									<ex-select v-model="form.dataSourceCode" dict-code="SysDictionary" placeholder="请选择数据字典"  @change="reviewChange"></ex-select>
								</el-form-item>
								<el-form-item v-if="form.dataSourceType==='2'"  label="数据源" prop="dataSourceCode">
									<ex-select v-model="form.dataSourceCode" dict-code="ENTITY_DICT" placeholder="请选择实体" @change="reviewChange"></ex-select>
								</el-form-item>
							</template>
							<template v-else>
								<el-form-item label="格式验证规则" prop="checkRuleCode">
									<el-input v-model="form.checkRuleCode" clearable placeholder="格式验证规则"></el-input>
								</el-form-item>
								<el-form-item label="格式化规则" prop="formatRuleCode">
									<el-input v-model="form.formatRuleCode" clearable placeholder="显示格式化规则"></el-input>
								</el-form-item>
							</template>
						</template>
						<el-form-item label="排序" prop="orderWeight">
							<el-input v-model="form.orderWeight" clearable placeholder="排序"></el-input>
						</el-form-item>
						<el-form-item label="备注" prop="description">
							<el-input v-model="form.description" clearable placeholder="备注"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
				<el-row :gutter="80" v-if="form.isGroup==='0'">
					<el-divider>效果预览</el-divider>
					<el-col :lg="24">
						<el-form label-width="130" label-position="right">
							<ex-form-item :key="efi" v-if="form.isGroup==='0'&&form.code" :column="form" :model="model" preview/>
						</el-form>
					</el-col>
				</el-row>
				</el-tab-pane>
			</el-tabs>
		</template>
		<template #footer>
			<div style="flex: auto;text-align: center">
				<el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
				<el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
				<el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
			</div>
		</template>

	</ex-dialog>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'
import ExRelTable from "@/components/exRelTable/index.vue";
import ExLabel from "@/components/exLabel/index.vue";
import ExFormItem from "@/components/exFormItem/index.vue";
import ExRadioGroup from "@/components/exRadioGroup/index.vue";
import ExSelect from "@/components/exSelect/index.vue";
import ExCascader from "@/components/exCascader/index.vue";
import exDialog from '@/components/exDialog';
import BaseTemplate from "@/utils/baseTemplate";

export default {
	computed: {},
	emits: ['success'],
	components: {
    ExCascader,
		ExSelect,
		ExRadioGroup,
    ExFormItem,
		ExLabel,
		ExRelTable,
		scIconSelect,
		exDialog
	},
	props: {
		menu: {
			type: Object, default: () => {
			}
		},
	},
	data() {
		return {
			activeName: 'base',
			visible: false,
			efi:0,
			form: {
			},
      model:{},
      parentOptions: [],
      parentProps: {
        value: 'levelCode',
        label: 'label',
        checkStrictly: true,
        emitPath: false,
      },
      group_rules: {
        isGroup: [
          {required: true, message: "请选择是否为分组", trigger: "blur"},
        ],
        name: [
          {required: true, message: "请输入名称", trigger: "blur"},
        ],
        code: [
          {required: true, message: "请输入编码", trigger: "blur"},
        ],
			},
			item_rules: {
        isGroup: [
          {required: true, message: "请选择是否为分组", trigger: "blur"},
        ],
        name: [
          {required: true, message: "请输入名称", trigger: "blur"},
        ],
        code: [
          {required: true, message: "请输入编码", trigger: "blur"},
        ],
        widgetType: [
          {required: true, message: "请选择控件类型", trigger: "blur"},
        ],
			},
			loading: false,
			oldForm: null,
		}
	},
	watch: {},
	mounted() {

	},
	onLoad() {
	},
	methods: {
    async initData() {
      this.parentOptions = await this.$cache.tree.options(this.$API.asset.column.treeData.storeName, {isGroup: '1'});
    },
		relHandler(relMap) {
			if (!this.form.relMaps) {
				this.form.relMaps = {};
			}
			for (let key in relMap) {//清空旧的数据
				this.form.relMaps[key] = {};
			}
			//重新赋值新数据
			Object.assign(this.form.relMaps, relMap);
		},
		//显示
		open(entity) {
			this.form = Object.assign({}, entity);
			this.oldForm = Object.assign({}, this.form);
      this.visible = true;
			this.activeName = "base";
			this.initData();
			this.widgetTypeChange();
		},
		reset() {
			this.form = Object.assign({}, this.oldForm);
			for(let ref in this.$refs){
				try {
					this.$refs[ref].refresh();
				}catch (e){
				}
			}
		},
		//保存
		async save() {
      let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
			if (valid) {

				try {
					this.loading = true
					var res;
					if (this.form.id) {
						res = await this.$API.asset.column.edit.post(this.form)
					} else {
						res = await this.$API.asset.column.add.post(this.form)
					}
					if (res.code === 2000) {
						this.$emit('success');
						this.$message.success(this.$t("code." + res.code));
						this.visible = false;
						this.$store.dispatch("commit",this.form.entityName);
					} else {
						this.$message.warning(res.message)
					}
				} finally {
					this.loading = false
				}
			}
		},
    widgetTypeChange(){
      if(this.form.widgetType==='file'||this.form.widgetType==='checkbox'){
        this.model[this.form.code]=[];
      }else{
        this.model[this.form.code]=null;
      }
	  this.reviewChange();
    },
		reviewChange(){
			this.efi++;
		},
	}
}
</script>

<style scoped>
h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
}

[data-theme="dark"] h2 {
	color: #fff;
}

</style>
